<template>
	<view class="content">
		<!-- 这里是状态栏 -->
		<view class="status_bar"></view>
		<Header :webtext='webtext'></Header>
		<view class="body">
			<view class="head">
				<u-tabs-swiper bg-color="#33385e" inactive-color="#fff" active-color="#7fb7ff" bar-width="80" bar-height="4" :bold="false"
				font-size="34" ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750">
				</u-tabs-swiper>
			</view>
			<swiper class="swiper" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
					<scroll-view scroll-y style="width: 100%;" @scrolltolower="onreachBottom">
						<view class="box">
							<view class="photo"
							 style="background-size: 100%;"
							 :style="{background:`url(${items.img}) no-repeat`}"
							  v-for="(items,i) in item.data"
							  @click=navto(items)
							  >
								<view>
									<image style="width: 32upx;" src="../../static/static/head.png" mode="widthFix"></image>
									<text>交易人数:{{randomNum(15000,30000)}}</text>
								</view>
								<view>
									{{i + 1}}厅
								</view>
								<view>
									单笔最低买入:{{items.min_bet_amount}}
								</view>
								<view>
									入场金额:{{items.available_limit}}
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import Header from '@/components/head.vue'
	export default {
		components:{  
			Header
		},
		data(){
			return{
				webtext:"交易大厅",
				url1:'/pages/index/DECP?id=',
				// list:[]
				// 死数据
				list: [{name: "中金1",data:[
						{available_limit: 1,game_type: 1,id: 134,identifier: "BJPCDD",is_instant: 0,min_bet_amount: 1,
						name: "中金1",online_count: 12575,series_id: 14,status: 3,rooms:"usa",cate:1,hall:1},
						{available_limit: 100000,game_type: 1,id: 135,identifier: "BJPCDDZ",is_instant: 0,min_bet_amount: 100,
						name: "中金1-2厅",online_count: 6878,series_id: 14,status: 3,rooms:"usa",cate:1,hall:2},
						{available_limit: 1000000,game_type: 1,id: 136,identifier: "BJPCDDG",is_instant: 0,min_bet_amount: 1000,
						name: "中金1-3厅",online_count: 7772,series_id: 14,status: 3,rooms:"usa",cate:1,hall:3},
						{available_limit: 5000000,game_type: 1,id: 155,identifier: "BJPCDDT",is_instant: 0,min_bet_amount: 10000,
						name: "中金1-4厅",online_count: 11809,series_id: 14,status: 3,rooms:"usa",cate:1,hall:4},
					]},{name: "中金2",data:[
						{available_limit: 1,game_type: 1,id: 125,identifier: "1FPCDD",is_instant: 0,min_bet_amount: 1,
						name: "中金2",online_count: 10279,series_id: 14,status: 3,rooms:"china",cate:6,hall:1},
						{available_limit: 100000,game_type: 1,id: 132,identifier: "1FPCDDZ",is_instant: 0,min_bet_amount: 100,
						name: "中金2-2厅",online_count: 9838,series_id: 14,status: 3,rooms:"china",cate:6,hall:2},
						{available_limit: 1000000,game_type: 1,identifier: "1FPCDDG",is_instant: 0,min_bet_amount: 1000,
						name: "中金2-3厅",series_id: 14,status: 3,rooms:"china",cate:6,hall:3},
						{available_limit: 5000000,game_type: 1,id: 153,identifier: "1FPCDDT",min_bet_amount: 10000,
						name: "中金2-4厅",online_count: 12984,series_id: 14,status: 3,rooms:"china",cate:6,hall:4}
					// ]},{name: "中金3",data:[
					// 	{available_limit: 1,game_type: 1,id: 130,identifier: "3FPCDD",is_instant: 0,min_bet_amount: 1,
					// 	name: "中金3",online_count: 2609,series_id: 14,status: 3},
					// 	{available_limit: 100000,game_type: 1,id: 146,identifier: "3FPCDDZ",is_instant: 0,min_bet_amount: 100,
					// 	name: "中金3-2厅",online_count: 9452,series_id: 14,status: 3},
					// 	{available_limit: 1000000,game_type: 1,id: 147,identifier: "3FPCDDG",is_instant: 0,min_bet_amount: 1000,
					// 	name: "中金3-3厅",online_count: 12526,status: 3},
					// 	{available_limit: 5000000,game_type: 1,id: 154,identifier: "3FPCDDT",is_instant: 0,min_bet_amount: 10000,
					// 	name: "中金3-4厅",online_count: 5663,series_id: 14,status: 3}
					]}],
					
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				photoList:["../../static/static/photo1.png","../../static/static/photo2.png",
				"../../static/static/photo3.png","../../static/static/photo4.png"],
				userinfo:""
			};
		},
		onLoad() {
			// this.getlist()
			this.$u.api.user().then(res => {
				this.userinfo = res.user.money
			})
			// 把背景图push到死数据里
			for(let u = 0;u<this.list.length;u++){
				for(let i = 0;i<this.list[u].data.length;i++){
					this.list[u].data[i].img = this.photoList[i]
				}
			}
		},
		methods: {
			randomNum(minNum,maxNum){ 
			    switch(arguments.length){ 
			        case 1: 
			            return parseInt(Math.random()*minNum+1,10); 
			        break; 
			        case 2: 
			            return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
			        break; 
			            default: 
			                return 0; 
			            break; 
			    } 
			},
			navto(items){
				if(parseFloat(this.userinfo) > items.available_limit){
					uni.navigateTo({
						url:`${this.url1}${items.min_bet_amount}&rooms=${items.rooms}&hall=${items.hall}`
					})
				}else{
					uni.showToast({
						title: "账户金额小于" + items.available_limit,
						duration: 1000,
						icon: 'none'
					});
				}
			},
			// 大厅数据
			getlist(){
				this.$u.api.service({
					action: "getAllGamesForLobby",
					terminal_id: 2,
					debug: false,
					lang: "zh",
				}).then(res => {
					this.list = res.data.games
					for(let u = 0;u<this.list.length;u++){
						for(let i = 0;i<this.list[u].data.length;i++){
							this.list[u].data[i].img = this.photoList[i]
						}
					}
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {
						
			}
		}
	}
</script>

<style scoped>
	.body{
		height: calc(100vh - 88upx - var(--status-bar-height));
		overflow-y: auto;
	}
	.body .head{
		height: 80upx;
		padding: 0 40upx;
		margin-top: 20upx;
	}
	.box{
		padding: 0 40upx;
	}
	.photo{
		height: 300upx;
		margin: 40rpx 0;
		background-size: 100% !important;
		padding: 12upx 20upx;
		color: white;
	}
	.photo view:nth-of-type(1){
		font-size: 22upx;
		float: right;
		display: flex;
		align-items: center;
	}
	.photo view:nth-of-type(1) text{
		margin-left: 10upx;
	}
	.photo view:nth-of-type(2){
		font-size: 48upx;
		margin-top: 14upx;
		margin-left: 10upx;
	}
	.photo view:nth-of-type(3){
		font-size: 22upx;
		margin-top: 46upx;
		margin-left: 10upx;
	}
	.photo view:nth-of-type(4){
		font-size: 22upx;
		margin-top: 16upx;
		margin-left: 10upx;
	}
	.swiper{
		height: 1410upx;
	}
</style>
